<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-title uni-column">
				添加收获地址
			</view>
			<view class="uni-form-item uni-column">
				<label for="">收获人</label>
				<input class="uni-input" name="recipient_name" v-model="form.recipient_name" focus
					placeholder="收获人姓名" />
			</view>
			<view class="uni-form-item uni-column">
				<label for="">手机号</label>
				<input class="uni-input" name="phone_number" v-model="form.phone_number" focus placeholder="收获人手机号" />
			</view>
			<view class="uni-form-item uni-column">
				<label for="">地区</label>
				<input @click="picker" v-model="form.address" class="uni-input" focus placeholder="点击选择" />
			</view>


			<input type="hidden" name="province" v-model="form.province">
			<input type="hidden" name="city" v-model="form.city">
			<input type="hidden" name="district" v-model="form.district">
			<view class="uni-form-item uni-column">
				<label for="">详细地址</label>
				<input class="uni-input" name="street" focus placeholder="如街道、门牌号、小区、乡镇、村等" />
			</view>
			<view class="uni-form-item uni-column">
				<label for="">邮编</label>
				<input class="uni-input" name="postal_code" v-model="form.postal_code" focus placeholder="邮编" />
			</view>
			<view class="uni-form-item uni-column">
				<label for="">是否设置成默认收获地址</label>
				<switch class="uni-input" name="is_default"  checked />
			</view>
			<view class="uni-btn-v">
				<button form-type="submit" type="warn">保存地址</button>
			</view>
		</form>
	</view>

	<view class="picker">
		<ProvinceCityAreaPicker @getData="getData" :showPicker="showPicker" :selectedArr="selectedArr">
		</ProvinceCityAreaPicker>
	</view>


</template>

<script>
	import ProvinceCityAreaPicker from "@/components/ProvinceCityAreaPicker.vue"
	export default {
		components: {
			ProvinceCityAreaPicker
		},
		data() {
			return {
				provinceCityArea: "",
				showPicker: false,
				selectedArr: [11, 3, 8],
				form: {
					"province": "",
					"city": "",
					"district": "",
					"address": "",
				}
			}
		},
		methods: {
			getData(data) {
				console.log(22222, data)
				if (data.type == 'confirm') {
					this.form.province = data.province == 'undefined' ? "" : data.province
					this.form.city = data.citie == 'undefined' ? "" : data.citie
					this.form.district = data.district == 'undefined' ? "" : data.district
					this.form.address = this.form.province + "" + this.form.city + "" + this.form.district
					this.selectedArr = data.selectedValues
					console.log(11111, this.form)
				}
				this.showPicker = false

			},
			picker() {
				this.showPicker = true
			},
			async formSubmit(e) {
				e.detail.value.user_id=1
				const data=e.detail.value
				data.is_default=data.is_default==true?1:0
				var response=await this.$http.createAddress(data)
				if (response.code==1){
					uni.navigateTo({
						url: '/pages/address/index'
					});
				}
			}

		}

	}
</script>

<style>
	body {
		margin: 0 auto;
		padding: 0px;
	}

	.uni-title {
		text-align: center;
		font-weight: 700;
		margin-top: 10px;
	}

	.uni-column {
		/* border: 1px solid red; */
		height: 30px;
		width: 100%;
		line-height: 30px;
		padding: 10px;
		border-bottom: 1px solid #D7D7D7;
		vertical-align: middle;
	}

	.uni-column label {

		color: black;
	}

	.uni-column input {
		/* border: 1px solid red; */
		width: 60%;
		height: 30px;
		padding-left: 20px;
		word-break: break-all;
	}

	.uni-column label,
	.uni-column input,.uni-column switch {
		float: left;
		margin-left: 10px;
		font-size: 14px;
		line-height: 30px;
		/* border: 1px solid red; */

	}

	.uni-btn-v {
		margin-top: 20px;
	}

	.picker {
		margin-top: 20px;
	}
</style>